<template>
	<div class='myView'>
		<div class="main-left">
			<el-menu default-active="/Cpage1" class="el-menu-vertical-demo" :router="true">
				<el-menu-item index="/Cpage1" :class="{'isActive': active}">葫芦娃</el-menu-item>
				<el-menu-item index="/Cpage2" :class="{'isActive': !active}">蜘蛛侠</el-menu-item>
				<el-menu-item index="/Cpage3" :class="{'isActive': !active}">金刚狼</el-menu-item>
			</el-menu>
		</div>
		<div class="main-right">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
export default {
  data: function (){
    return {
      active:true
    }
  }
}	
	
</script>

<style>
.myView {
	display: flex;
	width:100%;
}

.main-left {
	text-align: center;
	width: 200px;
	float: left;
}

.main-right {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-color: #fff;
	padding: 50px 70px;
}

.el-menu {
	background-color: transparent!important;
}
</style>